<template>
  <div class="c-bg-sgray">
    <div class="c-ph24 c-pv20 c-pt20" v-if="couponInfo">
      <coupon-item-com :couponInfo="couponInfo" :showFooter="false" class="c-mb20"></coupon-item-com>
      <!-- <div class="c-mb20 c-bg-white c-p c-ph24 c-pv20 c-br10">
        <div class="c-flex-row c-justify-sb c-aligni-center">
          <div class="c-flex-column c-justify-sa c-aligni-center c-fs18 c-br10 c-ww120 c-hh132 c-textAlign-c" :class="used == -1 ? 'coupon-used c-fc-white' : 'coupon-left c-fc-sblown'">
            <template v-if="couponInfo.type != 4 && couponInfo.type != 1">
              <div v-if="couponInfo.type == 5" class="c-fw-b c-fs40 c-fc-xlblown">{{Number(couponInfo.price)}}<span class="c-fs20">折</span></div>
              <div v-else class="c-fw-b c-ww120 c-fc-xlblown"><span class="c-fs20">{{'￥' | iosPriceFilter}}</span><span class="c-lh" :class="couponInfo.price.length > 6 ? 'c-fs22' : 'c-fs28'">{{Number(couponInfo.price)}}</span></div>
              <div v-if="couponType == 4">{{couponInfo.type == 6 ? '付费券' : '免费券'}}</div>
              <div v-else>{{Number(couponInfo.amount) > 0 ? '满'+Number(couponInfo.amount)+'可用' : '无门槛'}}</div>
            </template>
            <div class="c-fs32" v-else-if="couponInfo.type == 1">兑换券</div>
            <div class="c-fs32" v-else>抵价券</div>
          </div>
          <div class="c-flex-column c-justify-sb c-h c-fc-gray c-hh130 c-w0 c-flex-grow1 c-ml20">
            <div class="c-flex-column">
              <div class="c-fc-xblack c-fs24 c-text-ellipsis1">{{couponInfo.name}}</div>
              <div class="c-fs20 c-mt8" v-if="couponInfo.startAt && couponInfo.endAt">
                {{couponInfo.startAt.substr(0,10).replace(/-/g, ".")}}-{{couponInfo.endAt.substr(0,10).replace(/-/g, ".")}}
              </div>
            </div>
            <div class="c-fs20">{{couponInfo | couponApplyText}}</div>
          </div>
          <div class="" v-if="used == 1 || used == -1"><i class="iconfont c-fs100 c-fc-sgray">{{used == 1 ? '&#xe851;' : '&#xe850;'}}</i></div>
        </div>
      </div> -->
      <div v-if="couponInfo.enableGift == 1 && couponInfo.giftStatus == 1" class="c-flex-column c-flex-center c-mt30">
        <div class="c-flex-row c-aligni-center c-justify-sb">
          <div class="c-flex-shrink0 c-flex-row c-flex-center c-ww280 c-hh64 c-br40 c-fc-white theme-bg c-fs28 c-mr30" @click="openSharePopup">转赠好友</div>
          <div class="c-flex-shrink0 c-flex-row c-flex-center c-ww280 c-hh64 c-br40 c-fc-gray c-bd1-gray c-fs28 c-bg-white" @click="cancelShare">取消赠送</div>
        </div>
        <div class="c-fs24 c-fc-gray c-mt30">点击取消赠送后，优惠券将自动返回至您的账户中</div>
      </div>
      <div v-else-if="!!couponInfo.receiverNickName" class="c-bg-white c-flex-row c-aligni-center c-justiy-sb c-ph24 c-pv20 c-br16">
        <img class="c-ww80 c-hh80 c-brp50 c-flex-shrink0" :src="$addXossFilter(couponInfo.receiverHeadimgurl || require('@/assets/defult_head.png'))" alt="">
        <div class="c-flex-column c-ml20 c-flex-grow1 c-w0">
          <span class="c-fs24 c-fc-sblack c-text-ellipsis2">领取人：{{couponInfo.receiverNickName}}</span>
          <span class="c-fs22 c-fc-gray c-mt8">领取时间：{{couponInfo.getTime}}</span>
        </div>
      </div>
    </div>
    <share-com :isShow="isOpenSharePopup" @closeSharePopup="closeSharePopup" :item="couponInfo"></share-com>
  </div>
</template>

<script>
import shareCom from "@/components/templates/myValueVoucher/shareCom.vue";
import couponItemCom from "@/components/templates/couponItemCom.vue";
import {
  utilJs
} from "@/utils/common.js";
export default {
  name: "GiftTransfer",
  components: {
    shareCom,
    couponItemCom
  },
  props: [],
  data() {
    return {
      couponInfo: null,
      isOpenSharePopup: false,
      eRcdId: '',
      redeemCodeId: '',
      giftId: '',
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    // 触发转赠状态
    cancelGiftCouponStatus(status) { // status 1转赠操作 -1 取消转赠
      let data = {
        status: status,
        eRcdId: this.eRcdId
      }
      utilJs.postMethod(`${global.apiurl}coupon/giftCoupon`, data, res => {
        this.$routerGo(this, "replace", { path: "/member/myValueVoucher/myValueVoucher", query: {used: -2} });
      })
    },
    // 取消转赠
    cancelShare() {
      this.$cjConfirm({
        title: '提示',
        message: '是否取消赠送？',
        onConfirm:() => {
          this.cancelGiftCouponStatus(-1);
        }
      })
    },
    openSharePopup() {
      // hasGiftNum 已转赠被领取次数  giftTime总共可转赠被领取次数
      if ((this.couponInfo.receiveTime || 0) >= this.couponInfo.giftTime) {
        this.$showCjToast({
          text: "转赠次数已满，不可继续转赠！",
          type: "warn",
        });
        return
      }
      this.isOpenSharePopup = true;
    },
    closeSharePopup() {
      this.isOpenSharePopup = false;
    },
    // 获取优惠券包信息
    getCouponInfo () {
      // redeemCodes/getRedeemCodeInfo多处共用，多传from=1表示是查询转赠相关的信息，后台需要匹配当前优惠券的所有人是否是本人
      let postUrl = `${global.apiurl}redeemCodes/getRedeemCodeInfo/${this.redeemCodeId}?eRcdId=${this.eRcdId}&giftId=${this.giftId}&from=1`;
      utilJs.getMethod(postUrl, res => {
        this.couponInfo = res.data;
        this.couponInfo.eRcdId = this.eRcdId;
        setDocumentTitle(this.couponInfo.type == 1 ? '兑换券' : '优惠券');
        this.wechatShare();
      })
    },
    //分享
    wechatShare: function () {
      let title = this.couponInfo.name || '优惠券';
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl =
        window.location.href.split("#")[0] +
        `#/homePage/giftCode/${this.couponInfo.redeemCodeId}?refereeId=` +
        localStorage.getItem("userId") + '&isScan=1&type=1&isGift=1&eRcdId=' + this.couponInfo.eRcdId;
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc);
      // utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    },
  },
  activated() {
    // setDocumentTitle("优惠券");
    this.couponInfo = null;
    this.isOpenSharePopup = false;
    this.eRcdId = this.$route.query.eRcdId || '';
    this.redeemCodeId = this.$route.query.redeemCodeId || '';
    this.giftId = this.$route.query.giftId || '';
    this.getCouponInfo();
  },
  deactivated() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.c-br-l4{
  border-top-left-radius: 0.1rem;
  border-bottom-left-radius: 0.1rem;
}
.c-br-r4{
  border-top-right-radius: 0.1rem;
  border-bottom-right-radius: 0.1rem;
}
.coupon-left {
  background: url("../../../../public/i/wap/coupon/shareholderVoucherPay.png") no-repeat 100%;
  background-size: 100% 100%;
}
.coupon-used {
  background: url("../../../../public/i/wap/coupon/gray.png") no-repeat 100%;
  background-size: 100% 100%;
}
.exchange-left {
  background: url("../../../../public/i/wap/coupon/dui.png") no-repeat 100%;
  background-size: 100% 100%;
}
.c-lh64{
  line-height: 1.6rem;
}
em {
  font-style: normal;
}
.c-pa-em {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}
.c-pa-lt0 {
  left: -0.25rem;
  top: -0.25rem;
}
.c-pa-lb0 {
  left: -0.25rem;
  bottom: -0.25rem;
}
.c-pa-rb0 {
  right: -0.25rem;
  bottom: -0.25rem;
}
.c-pa-rt0 {
  right: -0.25rem;
  top: -0.25rem;
}
.icon-project-success {
  color: #1fbb22;
  font-size: 2.5rem;
}
.icon-project-error {
  color: #999999;
  font-size: 2.5rem;
}
.c-mr-32{
  margin-right: -0.8rem;
}
.c-hh92{
  height: 2.3rem;
}
.c-p-t144{
  top: 3.6rem;
}
.c-hh76{
  height: 1.9rem;
}
.c-mt172{
  margin-top: 4.3rem;
}
.c-mt30{
  margin-top: 0.75rem;
}
.c-pv17{
  padding-top: 0.425rem;
  padding-bottom: 0.425rem;
}
.c-br-bl30 {
  border-bottom-left-radius: 0.75rem;
}
.c-br-br30 {
  border-bottom-right-radius: 0.75rem;
}
.c-blr0 {
  border-left: 0;
  border-right: 0;
}
.c-pt104 {
  padding-top: 2.6rem;
}
.pb6 {
  padding-top: 0.15rem
}
.p-t76 {
  padding-top: 1.9rem
}
</style>
